<template>
  <el-dialog title="分配权限" :visible.sync="visible" @close="btnPermCancel">
    <!-- 权限是一颗树 -->
    <!-- 将数据绑定到组件上 -->
    <!-- check-strictly 如果为true 那表示父子勾选时  不互相关联 如果为false就互相关联 -->
    <!-- id作为唯一标识 -->
    <!-- Emelent-Tree 树形控件,定义的方法,default-expanded-keys 默认展开的节点的 key 的数组 -->
    <!-- Emelent- 官网定义的 :props="defaultProps" -->
    <el-tree
      ref="permTree"
      :data="permData"
      :props="defaultProps"
      :show-checkbox="true"
      :check-strictly="true"
      :default-expand-all="true"
      :default-checked-keys="selectCheck"
      node-key="id"
    />
    <!-- 确定 取消 -->
    <el-row slot="footer" type="flex" justify="center">
      <el-col :span="6">
        <el-button type="primary" size="small" @click="btnPermOK"
          >确定</el-button
        >
        <el-button size="small" @click="btnPermCancel">取消</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>

<script>
// 7月22号------------------7月22号------------------7月22号------------------
// getPermissionList,获取权限列表的接口
import { getPermissionList } from '../../../api/permission.js'
// getRoleById，根据id获取角色(点击修改的时候获取)
// assignPerm,给角色分配权限
import { getRoleById, assignPerm } from '../../../api/setting.js'
// 数组转树,的方法
import { formtData } from '../../../utils/index.js'
export default {
  data () {
    return {
      visible: false, // 是否显示
      defaultProps: {
        label: 'name'
      },
      permData: [], // 专门用来接收权限数据 树形数据
      selectCheck: [], // 定义一个数组来接收 已经选中的节点
      roleId: null // 用来记录分配角色的id
    }
  },
  methods: {
    // 7月22号--------------------7月22号--------------------
    // 定义一个方法
    // 自定义的方法,获取用户数据的
    // userId是接收到setting\index.vue父组件传递过来的id (用这个id去获取对应的数据,这是角色id)
    async show (id) {
      // console.log('id', id)
      // const res = await getPermissionList()
      // console.log('res', res)
      // 将数据赋值到data中的permData
      // this.permData = formtData(res, '0')
      // ------------------------------------------------
      // 把这个父组件传递过来的id保存在data中,方便后期其他的方法使用
      this.roleId = id
      // 简写语法
      const tree = formtData(await getPermissionList(id), '0') // getPermissionList这个接口不需要参数,但是带参数后也能获取,带了的话服务器本身不需要参数,他就不会接收
      // const tree = formtData(await getPermissionList(), '0')
      this.permData = tree
      // 根据id获取角色信息
      const res1 = await getRoleById(id)
      // 打印出来得 permIds: (2) ["604f7e5bf900be1850edb156", "604f7e66f900be1850edb157"]
      // console.log('res1', res1)
      // 将获取到的数据赋值到data里面的，，，selectCheck定义一个数组来接收 已经选中的节点
      this.selectCheck = res1.permIds
      this.visible = true
    },
    // 7月22号---------重点-----------7月22号---------重点-----------7月22号--------------------
    // 但是在点击确定事件,是拿到不到show这个方法的(需要用到里面的id)
    // 所以想要两个方法共用一个数据,那就把show放接收到的id保存在data里面
    async btnPermOK () {
      // console.log('btnPermOK')
      // 调接口,提交数据,给角色分配权限的接口
      // assignPerm这个接口需要两个参数,一个是角色的id,this.roleId,一个是perIds(选择的权限id)
      // --------------------------------------------------------------------------------------
      // 重点,,,在el-tree标签里面设置了这个属性 :default-checked-keys="selectCheck"(这就是默认选中的值)
      // 但是当选中树形里面的二级选项时,在控制台vue组件里面的selectCheck这个值并不会帮我添加上去,
      // 因为这个字段就是单纯的,父给子传数据,没有v-model,也有.sync,(官网定义的方法就是没有.sync,所以加了也没用)
      // 解决方案....(需求是需要拿到所有选中的值???)
      // 在Emelent-treeTree 树形控件里面/树节点的选择里面有一个方法
      //  console.log(this.$refs.tree.getCheckedNodes()); getCheckedNodes就是取选中的节点
      //  console.log(this.$refs.tree.getCheckedKeys()); getCheckedKeys就是取选中的值
      // 必须在el-tree标签里面设置了ref="permTree",然后就可以通过ref找到这个组件(el-tree),以后,getCheckedNodes,getCheckedKeys这两个方法就生效了
      // --------------------------------------------------------------
      // 打印得到这个节点.包含所有的数据
      // console.log(this.$refs.permTree.getCheckedNodes())
      // 打印,得选中的id ["604f7df5f900be1850edb152", "604f7e07f900be1850edb153", "604f7e17f900be1850edb154"]
      // console.log(this.$refs.permTree.getCheckedKeys())
      // ----------------------------------------------------------
      // 参数定义没有错后,点击确定然后再控制台的neteork里面的XHR里面的preview就能看到分配成功了
      await assignPerm({
        id: this.roleId,
        permIds: this.$refs.permTree.getCheckedKeys()
      })
      this.$message.success('权限分配成功')
      this.visible = false
    },
    btnPermCancel () {
      this.selectCheck = [] // 清空数据
      this.visible = false // 关闭弹框
    }
  }
}
</script>

<style></style>
